feat(configurator): DX slice 1 — live scale ramp, color roles, accordion brand colors - #369
Merged
Merged
Conversation
…ion brand colors ScaleGenerator becomes always-visible with a two-column layout: inputs left, live ramp right. Each step shows proportional min/max bars (mobile/desktop icons), a Base anchor pill, and live font-size sample text. Eliminates the expand toggle — the generator renders inline in Settings as a first-class control. Colors panel gets accordion grouping: Core colors (Base/Neutral/Primary) always shown; Extended (Secondary/Tertiary) and Status behind opt-in disclosures with a "modified" badge when any token has an override. New ColorAssignments.svelte + colorRoles.js: a live semantic role swatch grid (Surfaces/Text/Borders/Interactive) collapsed behind a "Semantic roles" disclosure. Swatches resolve via the probe host so var(), oklch(from …) and light-dark() all compute against active overrides and update reactively. Updated generator.spec.js and undo-redo.spec.js to match the new always-open generator UI (.gen selector, renamed labels and buttons). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
📝 WalkthroughWalkthroughAdds a semantic color-role swatch preview: a new ChangesSemantic Color Roles Preview
ScaleGenerator Always-Visible UI Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@configurator/src/components/ColorAssignments.svelte`:
- Around line 19-30: The void overrides statement in the $effect block does not
establish a reactive dependency on override properties, so the effect won't
rerun when properties within overrides change. Instead of just referencing the
overrides object with void, explicitly read the override properties (such as
iterating through Object.keys or Object.entries of overrides) to establish the
proper reactive dependency. This ensures the effect reruns whenever the override
properties are updated, keeping the swatches synchronized.
In `@configurator/src/components/DomainPanel.svelte`:
- Around line 266-267: The modified badge condition on lines 266 and 283 only
checks for light theme color overrides using the `--sf-color-${c.key}-light`
pattern, but it misses dark theme overrides. Update both conditions to also
check for the dark variant by including an additional check for
`--sf-color-${c.key}-dark` in the same logical expression, ensuring the badge
displays "modified" if either the light or dark override exists for each color
in BRAND_SECONDARY.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 0c74ffc2-960e-4561-a309-2e9ea13ced50
📒 Files selected for processing (6)
configurator/src/components/ColorAssignments.svelteconfigurator/src/components/DomainPanel.svelteconfigurator/src/components/ScaleGenerator.svelteconfigurator/src/lib/colorRoles.jsconfigurator/tests-e2e/generator.spec.jsconfigurator/tests-e2e/undo-redo.spec.js
…y overrides - ColorAssignments: read each override value in the $effect so in-place key mutations retrigger the swatch re-measure (void overrides subscribes to the binding, not its properties). - DomainPanel: brand "modified" badge now checks both -light and -dark variants via a hasBrandOverride helper, so a dark-only pin still surfaces. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found and verified against the latest diff
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="configurator/src/lib/colorRoles.js">
<violation number="1" location="configurator/src/lib/colorRoles.js:18">
P2: Hard-coded semantic token catalogue violates sync-only token source rule. This can drift from generated API index and silently stale role swatches.</violation>
</file>
Reply with feedback, questions, or to request a fix.
Fix all with cubic | Re-trigger cubic
| */ | ||
|
|
||
| /** @type {ColorRoleGroup[]} */ | ||
| export const COLOR_ROLE_GROUPS = [ |
There was a problem hiding this comment.
P2: Hard-coded semantic token catalogue violates sync-only token source rule. This can drift from generated API index and silently stale role swatches.
Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At configurator/src/lib/colorRoles.js, line 18:
<comment>Hard-coded semantic token catalogue violates sync-only token source rule. This can drift from generated API index and silently stale role swatches.</comment>
<file context>
@@ -0,0 +1,54 @@
+ */
+
+/** @type {ColorRoleGroup[]} */
+export const COLOR_ROLE_GROUPS = [
+ {
+ section: 'Surfaces',
</file context>
…ole tokens - ScaleGenerator: size proportional bars against the largest of each step's mobile AND desktop value, so the mobile bar stays within its track even for inverted knob combos (baseMin > baseMax). Identified by cubic. - colorRoles: add a curation tripwire (tests/colorRoles.test.js) asserting every curated semantic role token exists in the baked api-index, mirroring tests/basics.test.js — a framework rename now fails CI instead of silently rendering a blank swatch. Addresses cubic's token-drift concern; the role→token map is inherently human curation, so it stays hand-authored. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
…e shell title The redesigned ScaleGenerator is always-open (tall) instead of collapsed, so as a flex child of the panel's scroll container it was compressed below its content — the grid overflowed and overlapped the Apply button and the next card, making the button unclickable in chromium (generator + undo-redo e2e timeouts). Pin the section with flex-shrink: 0 and raise the inputs column above the ramp so the controls are always hit-testable. Also update shell.spec.js to assert the renamed "Core brand colors" card (was "Brand & status colors" before the Colors accordion split). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
This was referenced Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First slice of per-panel DX improvements bringing the configurator closer to the polish of Automatic.css and the Core Framework Editor. Focuses on the two highest-traffic panels (Typography/Spacing and Colors).
1. ScaleGenerator — Core-style live ramp
font-sizesamples ("Ag") for instant visual feedback.clamp()when a scalar is missing.2. Colors panel — accordion brand groups
<details>disclosures.3. Semantic role swatches
lib/colorRoles.jsmaps 12 human-readable roles (Page background, Body text, Border, Link, Focus ring…) across 4 sections to their framework consumption tokens.ColorAssignments.svelterenders a live swatch grid behind a "Semantic roles" disclosure in the Colors Settings zone.var(),oklch(from …)andlight-dark()all compute against the active overrides and update reactively as brand colors change.Tests
generator.spec.jsandundo-redo.spec.jsupdated for the always-open generator (.genselector,Ratio (mobile)label,Reset/Reset viewportbuttons). Behaviour under test is unchanged.npm test(391 unit + 6 component) green ·svelte-check0 errors ·npm run check:versiongreen · production build clean.🤖 Generated with Claude Code
https://claude.ai/code/session_01Fg7U9rTiqBgbsPuz9kdWea
Generated by Claude Code
Summary by cubic
Upgrades the scale generator to an always-visible two‑column ramp and reorganizes the Colors panel with a semantic role preview. Fixes ramp bar sizing and a Chromium overlap issue; role swatches and “modified” badges stay accurate.
New Features
ColorAssignments.svelte+lib/colorRoles.jsrender Surfaces/Text/Borders/Interactive swatches resolved via the probe host and reactive to overrides/theme.Bug Fixes
-lightand-darkbrand overrides; addedtests/colorRoles.test.jsto fail CI on role-token drift.Written for commit 13af30a. Summary will update on new commits.
Summary by CodeRabbit
New Features
Improvements